<template>
  <j-modal :title="title" :width="1400" :visible="visible" :confirmLoading="confirmLoading" switchFullscreen
    :dialog-style="{ top: '20px' }" :maskClosable="false" @ok="handleOk" @cancel="handleCancel" cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :xl="4" :lg="7" :md="8" :sm="24">
                <a-form-item label="品牌">
                  <a-select allowClear defaultValue="1" v-model="queryParam.brandCode" showSearch
                    :filter-option="filterOption" :not-found-content="null">
                    <a-select-option v-for="item in brandList" :key="item.id" :value="item.brandCode">
                      {{ item.brandName }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="SKU编码">
                  <a-input placeholder="" v-model="queryParam.itemSku" allowClear></a-input>
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="名称">
                  <a-input placeholder="" v-model="queryParam.itemName" allowClear></a-input>
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="零售价格">
                  <a-input-group compact>
                    <template v-if="inputType == 'between'">
                      <a-input-number style="width: 100px; text-align: center" placeholder="最小值"
                        v-model="queryParam.beginPrice" allowClear />
                      <a-input style="width: 30px; border-left: 0; pointer-events: none; backgroundcolor: #fff"
                        placeholder="~" disabled />
                      <a-input-number style="width: 100px; text-align: center; border-left: 0" placeholder="最大值"
                        v-model="queryParam.endPrice" allowClear />
                    </template>
                  </a-input-group>
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="价格尾数">
                  <a-select v-model="queryParam.priceTail" allowClear>
                    <a-select-option v-for="(item, index) in priceTail" :key="index" :value="item.value">
                      {{ item.text }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="季节">
                  <a-select v-model="queryParam.itemSession" allowClear>
                    <a-select-option v-for="(item, index) in itemSession" :key="index" :value="item.value">
                      {{ item.text }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="类型">
                  <a-select v-model="queryParam.itemType" allowClear>
                    <a-select-option v-for="(item, index) in itemType" :key="index" :value="item.value">
                      {{ item.text }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="上架时间">
                  <a-range-picker
                    :ranges="{ 今天: [moment(), moment()], 本月: [moment().startOf('month'), moment().endOf('month')] }"
                    v-model="shelevsDateRange" @change="handleChange" />
                </a-form-item>
              </a-col>

              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                  <a-button type="default" @click="searchReset1" icon="reload" style="margin-left: 8px">重置</a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>

        <!-- 操作按钮区域 -->

        <!-- table区域-begin -->
        <div>
          <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
            <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
            <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
            <a style="margin-left: 24px" @click="onClearSelected">清空</a>
          </div>
          <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
            :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" @change="handleTableChange">
            <span slot="pstatus" slot-scope="text">
              <span v-if="text === 1">上架</span>
              <span v-else>下架</span>
            </span>
            <span slot="photo" slot-scope="text">
              <a-avatar shape="square" :src="text + '?x-oss-process=image/resize,w_50,h_50'"> </a-avatar>
            </span>
          </a-table>
        </div>
        <!-- table区域-end -->
      </a-card>
    </a-spin>
  </j-modal>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import moment from 'moment'
import { postAction } from '@/api/manage'
import { queryMerchantBussList } from '@/api/api'
import { filterObj } from '@/utils/util'

export default {
  name: 'SelectProductList',
  mixins: [JeecgListMixin],
  components: {},
  data() {
    return {
      title: '选择商品',
      confirmLoading: false,
      disableMixinCreated: true,
      moment,
      visible: false,
      inputType: 'between',
      orgList: [{ id: 'af139730e3ac474eabb17c6045afb7e3', departName: '鸣远路' }],
      shelevsDateRange: [],
      selectModel: {},
      selectLabel: '',
      itemSession: [
        { text: '春', value: '春' },
        { text: '夏', value: '夏' },
        { text: '秋', value: '秋' },
        { text: '冬', value: '冬' },
      ],
      itemType: [
        { text: '正价', value: '正价' },
        { text: '砍货', value: '砍货' },
        { text: '代卖', value: '代卖' },
      ],
      priceTail: [
        { text: '0', value: '0' },
        { text: '1', value: '1' },
        { text: '2', value: '2' },
        { text: '3', value: '3' },
        { text: '4', value: '4' },
        { text: '5', value: '5' },
        { text: '6', value: '6' },
        { text: '7', value: '7' },
        { text: '8', value: '8' },
        { text: '9', value: '9' },
      ],
      yesNoState: [
        { text: '是', value: '1' },
        { text: '否', value: '0' },
      ],
      pStatus: [
        { text: '上架', value: '1' },
        { text: '下架', value: '0' },
      ],
      brandList: [
      ],
      // 表头
      columns: [
        {
          title: '所属机构',
          align: 'center',
          dataIndex: 'orgName',
        },
        {
          title: '所属门店',
          align: 'center',
          dataIndex: 'shopName',
          sorter: true,
        },
        {
          title: '商品编码',
          align: 'center',
          dataIndex: 'itemCode',
        },
        {
          title: '产品主图',
          align: 'center',
          dataIndex: 'photo',
          scopedSlots: { customRender: 'photo' },
        },
        {
          title: '商品名称',
          align: 'center',
          dataIndex: 'itemName',
        },
        {
          title: 'SKU编码',
          align: 'center',
          dataIndex: 'itemSku',
        },
        {
          title: '季节',
          align: 'center',
          dataIndex: 'itemSession',
        },
        {
          title: '类型',
          align: 'center',
          dataIndex: 'itemType',
        },
        {
          title: '颜色',
          align: 'center',
          dataIndex: 'itemColor',
          sorter: true,
        },
        {
          title: '尺码',
          align: 'center',
          dataIndex: 'itemSize',
          sorter: true,
        },
        {
          title: '所属分类',
          align: 'center',
          dataIndex: 'itemCateName',
        },
        {
          title: '供应价',
          align: 'center',
          dataIndex: 'supplyPrice',
          sorter: true,
        },
        {
          title: '零售价',
          align: 'center',
          dataIndex: 'markPrice',
          sorter: true,
        },
        {
          title: '品牌',
          align: 'center',
          dataIndex: 'brandName',
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'pstatus',
          scopedSlots: { customRender: 'pstatus' },
        },
        {
          title: '上架时间',
          align: 'center',
          dataIndex: 'createTime',
        },
      ],
      url: {
        add: '/stock/posStockReturnBill/detail/add',
        list: '/stock/supplyProduct/list',
      },
    }
  },
  computed: {},
  created() { 
    this.loadBrandList()
  },
  methods: {
    searchReset1() {
      this.queryParam.itemCode = ''
      this.queryParam.itemName = ''
      this.queryParam.beginPrice = ''
      this.queryParam.endPrice = ''
      this.queryParam.priceTail = ''
      this.queryParam.itemSession = ''
      this.queryParam.itemType = ''
      this.queryParam.beginTime = ''
      this.queryParam.endTime = ''

      this.loadData()
    },
    loadBrandList() {
      this.brandList = []
      queryMerchantBussList({ 'bussType': 'BRAND' }).then((res) => {
        if (res.success) {
          for (let a of res.result) {
            this.brandList.push({ brandName: a.bussName, brandCode: a.bussCode })
          }
        }
      })
    },
    search(record) {
      console.log('record=', record)
      this.selectModel = record
      this.selectModel.orgIds = record.orgId
      this.queryParam.pStatus = '1'
      this.queryParam.orgIds = record.orgId
      this.queryParam.shopIds = record.shopId
      this.queryParam.excludeReturnBillId = record.id
      console.log('queryParam = ', this.queryParam)
      this.loadData(1)
    },
    close() {
      this.onClearSelected()
      this.$emit('close')
      this.visible = false
    },
    buildParam() {
      console.log(this.selectionRows)
      let param = []
      for (let row of this.selectionRows) {
        let item = {
          billId: this.queryParam.excludeReturnBillId,
          productId: row.id,
          curQty: row.ioQty,
          ioQty: 0,
          adjustQty: 1,
        }
        param.push(item)
      }
      return filterObj(param)
    },
    handleOk() {
      let isSelect = this.selectionRows.length > 0
      if (!isSelect) {
        this.$message.warning('请选择商品!')
        return false
      }

      this.confirmLoading = true
      let that = this
      let param = this.buildParam()
      console.log('param=', param)
      postAction(this.url.add, param)
        .then((res) => {
          if (res.success) {
            this.$emit('ok', this.selectionRows)
            this.close()
          } else {
            that.$message.warning(res.message)
          }
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    handleCancel() {
      this.close()
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    handleChange(date, dateString) {
      this.queryParam.beginTime = dateString[0]
      this.queryParam.endTime = dateString[1]
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>